<template>
  <div class="hello">
    <div class="public">
      <h1>公共部分</h1>
      <p style="font-size: 28px">&#128512; &#128516; &#128525; &#128151;</p>
    </div>

    <h3>{{ text }}</h3>
  </div>
</template>

<script>
import { isShenZhen } from "@/utils/branch";
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  mounted() {
    console.log(process.env.VUE_APP_BRANCH);
    console.log(process.env);
    console.log(process.env.VUE_APP_SHENZHEN);
    // eslint-disable-next-line no-undef
    console.log(BRANCH);
  },
  computed: {
    text() {
      if (isShenZhen()) {
        return "深圳";
      } else if (process.env.VUE_APP_BRANCH === process.env.VUE_APP_FOSHAN) {
        return "佛山";
      } else {
        return process.env.VUE_APP_BRANCH;
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.public {
  height: 150px;
  background-color: lightBlue;
}
h3 {
  margin: 40px 0 0;
}
</style>
